<template>
  <el-dialog
      v-model="diaVisible"
      title="删除灯具"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="520px"
      @close="resetForm"
  >
    <div style="font-size: 14px; color: #366; margin-bottom: 10px">选择所删除的灯具：</div>
    <el-select v-model="lightId" filterable placeholder="请选择">
      <el-option :label="item.lightnameFact" :value="item.lightId" v-for="item in lightList"/>
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="resetForm" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { deleteLight} from "../../router/api.js";

export default {
  name: "delLight",
  data(){
    return {
      diaVisible: false,
      lightId: ''
    }
  },
  props:{
    lightList: {
      type: Array,
      default: () => []
    }
  },
  methods:{
    show(){
      this.diaVisible = true
    },
    submitForm(){
      if(!this.lightId) return;
      deleteLight({lightId: this.lightId}).then(res => {
        if(res.data.code == 200){
          this.$emit('saveOk');
          this.resetForm();
        }
      })
    },
    resetForm() {
      this.diaVisible = false;
      this.lightId = ''
    }
  }
}
</script>

<style scoped>

</style>
